import "components"

import QtQuick 2.3

Item
{
    id: multiDelegate

    signal registerClicked
    signal menuEntryClicked(string _id)

    width: multiDelegate.ListView.view.width
    height: bestHeight(type)

    function bestHeight(type)
    {
        if(type === "userInfo")
            return 120;
        if(type === "title")
            return 40;
        if(type === "entry")
            return 60;
        if(type === "footer")
            return 200;
        return 120;
    }

    function bestDelegate(type)
    {
        if(type === "userInfo")
            return userInfoDelegate;
        if(type === "title")
            return titleDelegate;
        if(type === "entry")
            return entryDelegate;
        if(type === "footer")
            return footerDelegate;
        return SeparatorDelegate;
    }

    // user info
    Component
    {
        id: userInfoDelegate

        Rectangle
        {
            Image
            {
                id: userImage
                source: "qrc:///icons/user.png"
                width: 80
                height: 80
                anchors {left: parent.left; verticalCenter: parent.verticalCenter; margins: 20 }
            }

            Rectangle
            {
                anchors.fill: parent
                anchors.leftMargin: 100
                Icon { id: iconRegister; name: "pencil-square-o"; anchors.top: parent.top; anchors.topMargin: 5 }
                Text
                {
                    text: "Register"
                    font.pointSize: theme.smallFont
                    anchors { left: iconRegister.right; leftMargin: 2; }
                }

                MouseArea
                {
                    anchors.fill: parent
                    onClicked: registerClicked()
                }
            }
        }
    }

    // title
    Component
    {
        id: titleDelegate

        Rectangle
        {
            color: theme.menuTitle
            Text
            {
                text: value
                anchors {left: parent.left; verticalCenter: parent.verticalCenter; margins: 20 }
                font.pointSize: theme.smallFont
                color: theme.menuTitleText
                font.capitalization: Font.AllUppercase
            }
            Rectangle { height: 2; width: parent.width; color: theme.menuTitleBorder; anchors { horizontalCenter: parent.horizontalCenter; top: parent.top } }
            Rectangle { height: 2; width: parent.width; color: theme.menuTitleBorder; anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom } }
        }
    }

    // entry
    Component
    {
        id: entryDelegate

        Rectangle
        {
            Icon
            {
                anchors { left: parent.left; leftMargin: 10; verticalCenter: parent.verticalCenter }
                name: icon
                iconSize: 32
            }

            Text
            {
                anchors { left: parent.left; leftMargin: 80; verticalCenter: parent.verticalCenter }
                color: theme.menuText
                font.pixelSize: theme.mediumFont
                text: value
            }
            Rectangle { height: 2; width: parent.width; color: theme.menuTitleBorder; anchors { left: parent.left; leftMargin: 80; bottom: parent.bottom } }

            MouseArea
            {
                anchors.fill: parent
                onClicked: menuEntryClicked(identifier_)
            }
        }
    }

    // footer
    Component
    {
      id: footerDelegate

      Rectangle
      {
        color: theme.footerBackground
      }
    }

    // loader
    Loader
    {
        id: itemDisplay
        anchors.fill: parent
        anchors.topMargin: 2
        anchors.bottomMargin: 2
        sourceComponent: bestDelegate(type)
    }
}
